<template>
    <div>
        <header v-show="$route.path === '/index/usercenter'">
            <div class="user-box margin-l-r">
                <div class="heae-img"><img src="../../assets/images/index/head-img.png" /></div>
                <h4>{{ userInfo.remark }}</h4>
                <div class="content">
                    <div class="l"><span>姓名</span>{{ userInfo.name }}</div>
                    <div class="r"><span>联系方式</span>{{ userInfo.phone }}</div>
                </div>
            </div>
            <div class="func-list margin-l-r">
                <van-cell
                    v-for="(item, index) in funcList"
                    :key="index"
                    :value="item.versionInfo ? '版本 ' + item.versionInfo : ''"
                    is-link
                    :to="'/index/usercenter/' + item.pathName"
                >
                    <template #title>
                        <img :src="require('../../assets/images/index/' + item.iconName)" />
                        <span class="custom-title">{{ item.title }}</span>
                    </template>
                </van-cell>
            </div>
            <div class="button margin-l-r" @click="show = true">退出登录</div>
        </header>
        <keep-alive>
            <router-view class="small-container"></router-view>
        </keep-alive>
        <van-popup v-model="show" get-container="#app">
            <div class="tips">是否退出登录?</div>
            <div class="button-box">
                <div class="l" @click.stop="show = false">取消</div>
                <div class="r" @click.stop="loginOut">退出登录</div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { UserInfoApi, UserVersionApi } from '@/request/api';

export default {
    data() {
        return {
            userInfo: {},
            funcList: [
                { title: '个人信息', iconName: 'gerenxinxi.png', pathName: 'userinfodetail' },
                { title: '支付中心', iconName: 'zhifuzhongxin.png', pathName: '' },
                { title: '修改密码', iconName: 'xiugaimima.png', pathName: '' },
                { title: '版本信息', iconName: 'banbenxinxi.png', pathName: 'versioninfo', versionInfo: '' },
                { title: '清除缓存', iconName: 'qingchuhuancun.png', pathName: '' },
            ],
            show: false,
        };
    },
    created() {
        UserInfoApi().then((res) => {
            this.userInfo = res.data;
        });
        UserVersionApi().then((res) => {
            this.funcList[3].versionInfo = res.data.versions;
        });
    },
    methods: {
        loginOut() {
            localStorage.removeItem('token');
            sessionStorage.setItem('activeVal', 0);
            this.show = false;
            this.$toast.loading('即将跳转至登录页');
            setTimeout(() => {
                this.$router.push('/login');
            }, 2000);
        },
    },
};
</script>

<style lang="less" scoped>
header {
    margin-top: -0.72rem;
    width: 100%;
    height: 2.6rem;
    background-color: #003399;
    .user-box {
        position: relative;
        top: 1.44rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #fff;
        border-radius: 0.15rem;
        .heae-img {
            position: relative;
            top: calc(-1.96rem / 2);
            border: 0.07rem solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 0.1rem rgba(151, 151, 151, 0.5);
            width: 1.96rem;
            height: 1.96rem;
            border-radius: 50%;
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
            }
        }
        h4 {
            margin-top: -0.7rem;
            color: #656565;
        }
        .content {
            margin-top: 0.3rem;
            line-height: 0.98rem;
            border-top: 0.01rem dashed #e5e5e5;
            color: #333333;
            display: flex;
            justify-content: space-between;
            width: 90%;
            span {
                color: #999;
                margin-right: 0.26rem;
            }
        }
    }
    .func-list {
        margin-top: 1.64rem;
        background-color: #fff;
        border-radius: 0.15rem;
        overflow: hidden;
        .van-cell {
            border-bottom: 0.01rem solid #e5e5e5;
            height: 0.9rem;
            .van-cell__title {
                display: flex;
                align-items: center;
                img {
                    height: 68%;
                    margin-right: 0.22rem;
                }
            }
        }
        .van-cell::after {
            border-bottom: none;
        }
    }
    .button {
        text-align: center;
        line-height: 0.86rem;
        background-color: #ff3c3c;
        border: 1px solid #e5e5e5;
        border-radius: 0.86rem;
        color: rgb(255, 255, 255);
        margin-top: 1.37rem;
    }
}
.small-container {
    position: fixed;
    width: 100%;
    top: 0.72rem;
    height: calc(100vh - 2.02rem);
    background-color: #efefef;
}
.margin-l-r {
    margin: 0 0.3rem;
}
.van-popup--center {
    width: 5.2rem;
    height: 2.5rem;
    border-radius: 0.2rem;
    display: flex;
    flex-direction: column;
    color: #333;
    .tips {
        flex: 1;
        font-size: 0.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .button-box {
        border-top: 0.01rem solid #e5e5e5;
        height: 0.87rem;
        display: flex;
        position: relative;
        .l,
        .r {
            flex: 1;
            text-align: center;
            line-height: 0.87rem;
        }
        .l {
            color: #666;
        }
        .r {
            color: #4287ff;
        }
        &::after {
            content: '';
            position: absolute;
            height: 100%;
            width: 0.01rem;
            background-color: #e5e5e5;
            left: 50%;
            transform: translateX(-50%);
        }
    }
}
</style>
